<template>
  <div class="dispose-detail">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form ref="formRef" :model="params" label-width="auto">
          <el-row :gutter="50" style="margin-top: 30px">
            <el-col :span="6">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <el-input v-model="params.customername" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item label="涉废类型：">
                <el-select
                  v-model="params.wastetype"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in wasteList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="50">
            <el-col :span="6"
              ><el-form-item label="开始日期：">
                <el-date-picker
                  clearable
                  v-model="params.startdate"
                  type="date"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="params.enddate"
                  type="date"
                  clearable
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-wrap">
      <el-table
        :data="tableData"
        border
        class="table-height"
        style="width: 100%"
      >
        <el-table-column prop="customername" align="center" label="产废单位" />
        <el-table-column prop="enterprisename" align="center" label="处置单位">
          <!-- <template #default="{ row }">
            <div>
              {{
                disposeEnterpriseList?.find(
                  (i) => i.id == row.disposeenterpriseid
                )?.enterprisename
              }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="address" align="center" label="设施编号" />
        <el-table-column prop="wastetype" align="center" label="涉废类型">
          <template #default="{ row }">
            <div>
              {{ wasteList.find((item) => item.value == row.wastetype)?.label }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wastenum"
          align="center"
          label="处置量"
          width="150px"
        >
          <template #default="{ row }">
            <div>{{ row.wastenum }}kg</div>
          </template>
        </el-table-column>
        <el-table-column prop="committime" align="center" label="处置时间" />
        <el-table-column align="center" label="操作" width="160px">
          <template #default="{ row }">
            <button @click="searchDetail(row)">查看详情</button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>
    <Dialog
      diaTop="21"
      v-model:showDialog="showDialog"
      :footerShow="false"
      diaWidth="50"
      headerName="记录详情"
    >
      <template #content>
        <div class="content-wrap">
          <div class="line">
            <div class="left">企业名称：{{ itemDetail?.customername }}</div>
            <div class="right">处置单位：{{ itemDetail.enterprisename }}</div>
          </div>

          <div class="line">
            <div class="left">
              处置类型：{{
                wasteList.find((item) => item.value == itemDetail.wastetype)
                  ?.label
              }}
            </div>
            <div class="right">
              处置量：{{ itemDetail.wastenum
              }}{{
                unitList.find((item) => item.value == itemDetail.wasteunit)
                  ?.label
              }}
            </div>
          </div>
          <div class="line">
            <div class="left">处置联单编号：{{ itemDetail.orderno }}</div>
            <div class="right">处置时间：{{ itemDetail.committime }}</div>
          </div>
          <div class="line">
            <div class="left">
              处置联单图片：<button
                @click="searchImg(itemDetail.disposeimgurl)"
              >
                点击查看
              </button>
            </div>
            <div class="right">车辆信息：{{ itemDetail.transtruck }}</div>
          </div>
          <div class="line">
            <div class="left">驾驶员信息：{{ itemDetail.transdriver }}</div>
            <div class="right"></div>
          </div>
        </div>
      </template>
    </Dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup lang="ts">
import http from "@http";
import changeArea from "@/utils/changeArea";
import Pagination from "@/components/Pagination.vue";
import ElMessage from "@/components/ElMessage.js";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
let params = reactive({});
let handleSearch = () => {};
let total = ref(1);
let adminAreaList = ref([]);
let wasteList = ref([]);
let showImg = ref(false);
let disposeEnterpriseList = ref([]);
let showDialog = ref(false);
let srcList = ref([]);
let unitList = ref([]);
let itemDetail = ref({});
let searchDetail = (item) => {
  showDialog.value = true;
  itemDetail.value = item;
  console.log(itemDetail.value, "itemDetail");
};
let tableData = ref([{ date: "浮点数" }]);
let getList = () => {
  http({ url: "/wasteDispose/datalist", data: params }).then((res) => {
    tableData.value = res.data.list;
    total.value = res.data.total;
    ElMessage({ msg: "查询成功" });
  });
};

getList();
let searchImg = (url) => {
  if (!url) {
    ElMessage({ type: "warning", msg: "暂无图片" });
    return;
  }
  showImg.value = true;
  srcList.value = url.split(",");
  console.log(srcList.value, " srcList.value ");
};
http({ url: "/region/datalisttree" }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
  if (res.code == 0) {
    wasteList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getmodule", data: { module: "B04" } }).then((res) => {
  if (res.code == 0) {
    unitList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({
  url: "/enterpriseThird/listThirdEnterprises",
}).then((res) => {
  if (res.code == 0) {
    disposeEnterpriseList.value = res.data;
  }
});
</script>
<style lang="scss" scoped>
.dispose-detail {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 192px;
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      padding-left: 35px;
      padding-right: 43px;
    }
  }
  .content-wrap {
    padding-left: 30px;
    /* padding-right: 10px; */
    padding-top: 30px;
    padding-bottom: 20px;
    .line {
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        line-height: 48px;
        flex: 1;
        button {
          color: #0874fa;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;
          line-height: 48px;
          text-align: left;
          color: #0874fa;
        }
      }
      .right {
        width: 340px;
        margin-left: 70px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        line-height: 48px;
        text-align: left;
        flex: 1;
        button {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24px;

          line-height: 48px;
          text-align: left;
          color: #0874fa;
        }
      }
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 192px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      height: calc(100vh - 41.1vh);
      overflow-y: scroll;

      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
}
</style>
